<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="../Output/Photon-debug.js" type="text/javascript"></script>

    <script type="text/html" id="itemTemplate">
        <li>
            <div style="display:inline">
                <Button data-action="$dataContext('Items').remove($data)">Remove</Button>
                <span>
                    Item
                    <span data-bind="innerText:id"></span>
                    <span data-flow="if: id %2 != 0">
                        (This is an odd numbered item.)
                    </span>
                </span>
            </div>
        </li>
    </script>

    <script type="text/javascript">
        var itemCount = 0;
        var items = new photon.observable.Array();
        var container =
        {
            items:items,
            addNew:function () {
                this.items.push({id:itemCount++});
            },
            remove:function (item) {
                this.items.remove(item);
            }
        };

        function bind() {
            photon.binding.applyBindings(container, $("#root")[0], "Items");
        }

    </script>
</head>
<body onload="bind()">
<div id="root">
    <Button data-action="addNew()">Add New Item</Button>
    Current Items:
    <ul data-bind="data-template:{name:'itemTemplate', each:items}, name:Items">

    </ul>
    <div>
        <span>There are <span data-bind="innerText:items.length()"></span> items in the list.</span>
    </div>
</div>
</body>
</html>